<template>
  <el-dialog
      v-model="visible"
      title="任务详情"
      width="800px"
      @close="handleClose"
  >
    <div v-loading="loading">
      <div v-if="taskDetail.id">
        <!-- 任务基本信息 -->
        <el-card class="detail-card" shadow="never">
          <div class="task-header">
            <div>
              <h2>{{ taskDetail.name }}</h2>
              <div class="task-tags">
                <el-tag :type="getTaskTypeColor(taskDetail.type)">
                  {{ getTaskTypeName(taskDetail.type) }}
                </el-tag>
                <el-tag :type="getStatusColor(taskDetail.status)" style="margin-left: 8px">
                  {{ getStatusName(taskDetail.status) }}
                </el-tag>
              </div>
            </div>
            <div class="reward-info">
              <span class="reward-amount">¥{{ taskDetail.reward }}</span>
            </div>
          </div>

          <p class="task-description">{{ taskDetail.description }}</p>

          <!-- 地址信息 -->
          <div class="address-section">
            <div class="address-item">
              <el-icon>
                <LocationFilled/>
              </el-icon>
              <div>
                <div class="address-label">起点</div>
                <div class="address-text">{{ taskDetail.originAddress }}</div>
              </div>
            </div>
            <div class="address-item">
              <el-icon>
                <Location/>
              </el-icon>
              <div>
                <div class="address-label">终点</div>
                <div class="address-text">{{ taskDetail.destAddress }}</div>
              </div>
            </div>
          </div>

          <!-- 任务详情 -->
          <el-row :gutter="20" class="task-info-row">
            <el-col :span="6">
              <div class="info-item">
                <el-icon>
                  <MapLocation/>
                </el-icon>
                <div>
                  <div class="info-label">距离</div>
                  <div class="info-value">{{ taskDetail.distance }}km</div>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <el-icon>
                  <Timer/>
                </el-icon>
                <div>
                  <div class="info-label">预计时间</div>
                  <div class="info-value">{{ taskDetail.estimatedTime }}分钟</div>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <el-icon>
                  <Clock/>
                </el-icon>
                <div>
                  <div class="info-label">截止时间</div>
                  <div class="info-value">{{ taskDetail.deadline }}</div>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <el-icon>
                  <School/>
                </el-icon>
                <div>
                  <div class="info-label">校区</div>
                  <div class="info-value">{{ taskDetail.campus }}</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>

        <TaskStage :task="taskDetail"></TaskStage>

        <!-- 委托人信息 -->
        <el-card class="publisher-card" shadow="never" style="margin-top: 16px">
          <template #header>
            <span>委托人信息</span>
          </template>
          <div class="publisher-info">
            <el-avatar :icon="UserFilled" :size="60" :src="taskDetail.publisher?.avatar?.url"/>
            <div class="publisher-details">
              <h3>{{ taskDetail.publisher?.nickname }}</h3>
              <div class="credit-info">
                <el-rate v-model="taskDetail.publisher.creditScore" disabled show-score/>
              </div>
              <p class="publisher-contact">
                <el-icon>
                  <Phone/>
                </el-icon>
                {{ taskDetail.publisher?.phone }}
              </p>
            </div>
          </div>
        </el-card>

        <!-- 历史评价 -->
        <el-card class="review-card" shadow="never" style="margin-top: 16px">
          <template #header>
            <span>历史评价 ({{ taskDetail.reviewList?.length || 0 }})</span>
          </template>
          <div v-if="taskDetail.reviewList && taskDetail.reviewList.length > 0">
            <div
                v-for="review in taskDetail.reviewList"
                :key="review.id"
                class="review-item"
            >
              <div class="review-header">
                <el-avatar :icon="UserFilled" :size="32" :src="review.userAvatar"/>
                <div class="review-user-info">
                  <div class="user-name">{{ review.userName }}</div>
                  <div class="review-rating">
                    <el-rate v-model="review.rating" disabled size="small"/>
                    <span class="review-time">{{ review.createTime }}</span>
                  </div>
                </div>
              </div>
              <div class="review-content">{{ review.content }}</div>
            </div>
          </div>
          <el-empty v-else description="暂无评价"/>
        </el-card>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button
            v-if="taskDetail.status === 1"
            type="primary"
            @click="handleAcceptTask"
        >
          接单
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref, watch} from 'vue'
import {ElMessage} from 'element-plus'
import {Clock, Location, LocationFilled, MapLocation, Phone, School, Timer, UserFilled} from '@element-plus/icons-vue'
import request from '@/utils/request'
import {confirm} from "@/utils/utils.js";
import TaskStage from "@/components/TaskStage.vue";

const props = defineProps({
  modelValue: Boolean,
  taskId: [String, Number]
})

const emit = defineEmits(['update:modelValue', 'acceptTask'])

const visible = ref(false)
const loading = ref(false)
const taskDetail = ref({})

// 监听显示状态
watch(() => props.modelValue, (val) => {
  visible.value = val
  if (val && props.taskId) {
    handleGetTaskDetail()
  }
})

watch(visible, (val) => {
  emit('update:modelValue', val)
})

// 获取任务详情
const handleGetTaskDetail = async () => {
  loading.value = true
  taskDetail.value = await request.get(`/task/${props.taskId}`)
  loading.value = false
}

// 接单
const handleAcceptTask = async () => {
  confirm('是否确认接单', async () => {
    await request.post('/task/accept' + taskDetail.value.id)
    ElMessage.success('接单成功')
    emit('acceptTask', taskDetail.value)
    handleClose()
  })
}

// 关闭弹窗
const handleClose = () => {
  visible.value = false
  taskDetail.value = {}
}

// 工具函数
const getTaskTypeName = (type) => {
  const types = {1: '代购', 2: '代取快递', 3: '代办事务'}
  return types[type] || '未知'
}

const getTaskTypeColor = (type) => {
  const colors = {1: 'primary', 2: 'success', 3: 'warning'}
  return colors[type] || 'info'
}

const getStatusName = (status) => {
  const statuses = {1: '待接单', 2: '进行中', 3: '已完成', 4: '已取消', 5: '已关闭'}
  return statuses[status] || '未知'
}

const getStatusColor = (status) => {
  const colors = {1: 'warning', 2: 'primary', 3: 'success', 4: 'danger', 5: 'info'}
  return colors[status] || 'info'
}
</script>

<style scoped>
.detail-card {
  margin-bottom: 10px;
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.task-header h2 {
  margin: 0 0 8px 0;
  font-size: 20px;
  color: #303133;
}

.reward-amount {
  font-size: 24px;
  font-weight: 600;
  color: #ff4757;
}

.task-description {
  color: #606266;
  line-height: 1.6;
  margin-bottom: 20px;
}

.address-section {
  margin-bottom: 20px;
}

.address-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.address-label {
  font-size: 12px;
  color: #909399;
  margin-bottom: 4px;
}

.address-text {
  color: #303133;
  font-weight: 500;
}

.task-info-row {
  margin-top: 20px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-label {
  font-size: 12px;
  color: #909399;
  margin-bottom: 4px;
}

.info-value {
  color: #303133;
  font-weight: 500;
}

.publisher-info {
  display: flex;
  gap: 16px;
}

.publisher-details h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
}

.credit-info {
  margin-bottom: 8px;
}

.publisher-contact {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #606266;
  margin: 0;
}

.review-item {
  padding: 16px 0;
  border-bottom: 1px solid #ebeef5;
}

.review-item:last-child {
  border-bottom: none;
}

.review-header {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
}

.review-user-info {
  flex: 1;
}

.user-name {
  font-weight: 500;
  margin-bottom: 4px;
}

.review-rating {
  display: flex;
  align-items: center;
  gap: 8px;
}

.review-time {
  font-size: 12px;
  color: #909399;
}

.review-content {
  margin-left: 44px;
  color: #606266;
  line-height: 1.5;
}
</style>
